<script setup>

import {watch} from "vue";
import {DFT_ICONS} from "@jzl/icons";

const istyle = defineModel()
const props = defineProps({
  // istyle: Object,
  eleDef: Object,
  currentItemElCode: String
})

watch(() => istyle.value, (val) => {
  if (!val) return;

  if (typeof val.scaleX === "undefined" || val.scaleX === null || val.scaleX === "") {
    val.scaleX = 1;
  }

  if (typeof val.scaleY === "undefined" || val.scaleY === null || val.scaleY === "") {
    val.scaleY = 1;
  }

  if (typeof val.scaleZ === "undefined" || val.scaleZ === null || val.scaleZ === "") {
    val.scaleZ = 1;
  }
})
</script>

<template>
  <div class="ele-prop-item">
    <el-form
      label-width="80px"
      label-position="top"
      size="mini"
      v-if="istyle">
      <el-form-item label="">
        <el-radio-group v-model="istyle.tfType">
          <el-radio-button label="" v-tippy="{ arrow: true }" content="默认">
            <JIcon :icon="DFT_ICONS.initialize" />
          </el-radio-button>
          <el-radio-button label="none" v-tippy="{ arrow: true }" content="无">
            <JIcon :icon="DFT_ICONS.none" />
          </el-radio-button>
          <el-radio-button label="translate" v-tippy="{ arrow: true }" content="移动">
            <JIcon :icon="DFT_ICONS.move" />
          </el-radio-button>
          <el-radio-button label="scale" v-tippy="{ arrow: true }" content="缩放">
            <JIcon :icon="DFT_ICONS.scale" />
          </el-radio-button>
          <el-radio-button label="rotate" v-tippy="{ arrow: true }" content="旋转">
            <JIcon :icon="DFT_ICONS.rotate" />
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <template v-if="istyle.tfType === 'translate'">
        <el-form-item label="X 轴移动">
          <el-input
            v-model="istyle.translateX"
            size="small"
            placeholder="绝对值或百分比，如：-10px、10%"
          />
        </el-form-item>
        <el-form-item label="Y 轴移动">
          <el-input
            v-model="istyle.translateY"
            size="small"
            placeholder="绝对值或百分比，如：-10px、10%"
          />
        </el-form-item>
        <!--<el-form-item label="Z 轴旋转">
            <el-input v-model="istyle.translateZ" placeholder="绝对值或百分比，如：-10px、10%"></el-input>
        </el-form-item>-->
      </template>
      <template v-else-if="istyle.tfType === 'scale'">
        <el-form-item label="X 轴缩放">
          <template #label>
            <div class="w-full flex justify-between">
              <span>X 轴缩放</span>
              <el-input-number
                v-model="istyle.scaleX"
                size="small"
                :min="0"
                :max="5"
                :step="0.01"
                class="pure-lack w-20"
                controls-position="right"
              />
            </div>
          </template>
          <el-slider
            v-model="istyle.scaleX"
            input-size="mini"
            height="20"
            size="small"
            :min="0"
            :max="5"
            :step="0.01"
          />
        </el-form-item>
        <el-form-item label="Y 轴缩放">
          <template #label>
            <div class="w-full flex justify-between">
              <span>Y 轴缩放</span>
              <el-input-number
                v-model="istyle.scaleY"
                size="small"
                :min="0"
                :max="5"
                :step="0.01"
                class="pure-lack w-20"
                controls-position="right"
              />
            </div>
          </template>
          <el-slider
            v-model="istyle.scaleY"
            input-size="mini"
            height="20"
            size="mini"
            :min="0"
            :max="5"
            :step="0.01"
          />
        </el-form-item>
        <!--<el-form-item label="Z 轴缩放">
            <el-slider v-model="istyle.scaleZ" input-size="mini" height="20" size="mini" :min="0" :max="5" :step="0.01"></el-slider>
        </el-form-item>-->
      </template>
      <template v-else-if="istyle.tfType === 'rotate'">
        <el-form-item label="旋转角度">
          <template #label>
            <div class="w-full flex justify-between">
              <span>旋转角度</span>
              <el-input-number
                v-model="istyle.rotate"
                size="small"
                :min="0"
                :max="360"
                :step="1"
                class="pure-lack w-20"
                controls-position="right"
              />
            </div>
          </template>
          <el-slider
            v-model="istyle.rotate"
            input-size="small"
            height="20"
            size="small"
            :min="0"
            :max="360"
            :step="1"
          />
        </el-form-item>
        <!--<el-form-item label="Y 轴缩放">
            <el-slider v-model="istyle.rotateY" input-size="mini" height="20" size="mini" :min="0" :max="360" :step="1"></el-slider>
        </el-form-item>
        <el-form-item label="Z 轴缩放">
            <el-slider v-model="istyle.rotateZ" input-size="mini" height="20" size="mini" :min="0" :max="360" :step="1"></el-slider>
        </el-form-item>-->
      </template>
    </el-form>
  </div>
</template>
